<template>
  <div>
    <masked-input v-model="date" mask="1111-11-11" placeholder="yyyy-mm-dd" />
    {{date}}
    <input :value="myInput" type="text" @keypress="textInput" @keyup="keyUp">
    {{myInput}}

    <el-date-picker
      v-model="eleDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    {{eleDate}}

    <div style="width:500px">
      <li style="display:block;height:100px;background:#000">#000000</li>
      <li style="display:block;height:100px;background:#333">#333333</li>
      <li style="display:block;height:100px;background:#666">#666666</li>
      <li style="display:block;height:100px;background:#999">#999999</li>
      <li style="display:block;height:100px;background:#ccc">#cccccc</li>
    </div>
  </div>
</template>

<script>
import MaskedInput from '../components/InputMask' 

import InputMask from 'inputmask-core';

export default {
  name: 'Inputmaskview',
  components: {
    MaskedInput
  },
  data() {
    return {
      date: '2021-10-11',
      myInput: '',
      eleDate: ''
    }
  },
  watch: {
    myInput(newValue) {
      this.mask.setValue(newValue)
    }
  },
  created() {
    this.mask = new InputMask({ pattern: '1111-11-11' })
  },
  methods: {
    textInput(e) {
      if (e.preventDefault) e.preventDefault();

      console.log(e.key, e.keyCode)
      this.mask.input(e.key)
      if (this.myInput !== this.mask.getValue()) {
        this.myInput = this.mask.getValue();
      }
      // this.$emit('input', this.$refs.myInput.value, this.mask.getRawValue());
      console.log('value', e.target.selectionStart)
      e.target.selectionStart = this.mask.selection.start;
      e.target.selectionEnd = this.mask.selection.end;
    },
    keyUp(e) {
      e.target.selectionStart = this.mask.selection.start;
      e.target.selectionEnd = this.mask.selection.end;
    }
  }
}
</script>
